<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div v-if="port.topTextList[0]" class="inpBox m1280 f f-a-c">
			<div class="lefImg">
				<img :src="port.topTextList[0].image" alt="" />
			</div>
			<div class="rigInp">
				<div class="inpTit">Connect with your fans.</div>
				<div class="inpbox f f-a-c">
					<input type="text" class="inp" placeholder="Search .." v-model="sche" name="" id="" />
					<div @click="goIndustry" class="iconImg hand f f-a-c f-j-c"><img src="/src/assets/sche.png" class="sche" alt="" /></div>
				</div>
				<!-- topics -->
				<div class="topics f f-a-c f-w-w">
					<div class="topicsTit hand">Popular :</div>
					<div @click="sche = item.value" class="topItem hand" v-for="(item, index) in port.messageList">{{ item.value }}</div>
					<!-- <div class="topItem hand">Marketing</div>
					<div class="topItem hand">AIGC</div>
					<div class="topItem hand">Leadership</div> -->
				</div>
			</div>
		</div>
		<div v-if="port.topTextList[1]" class="inpBox m1280 f f-a-c">
			<div class="lefCount f f-d-c f-a-c f-j-c">
				<div>
					<div class="topTitle">{{ port.topTextList[1].title }}</div>
					<div class="ocuntCun" v-html="port.topTextList[1].content"></div>
				</div>
			</div>
			<div class="rigImg"><img :src="port.topTextList[1].image" alt="" /></div>
		</div>
		<div v-if="port.topTextList[2]" class="inpBox m1280 f f-a-c">
			<div class="lefImg">
				<img :src="port.topTextList[2].image" alt="" />
			</div>
			<div class="lefCounts f f-d-c f-a-c f-j-c">
				<div>
					<div class="topTitle">{{ port.topTextList[2].title }}</div>
					<div class="ocuntCun" v-html="port.topTextList[2].content"></div>
					<!-- <div class="topTitle">Learning is easy!</div>
					<div class="ocuntCun">
						Targeted learning. <br />Focus on your needs.<br />Easy to organize your knowledge system.<br />
						Secure payment.
					</div> -->
				</div>
			</div>
		</div>
		<!-- How does KnowClub work? -->
		<div class="work">How does KnowClub work?</div>
		<div class="countList m1280 f f-w-w f-a-c">
			<div v-for="(item, index) in port.whyList" :key="index" class="countItems">
				<div class="tit">{{ item.title }}</div>
				<div class="count">{{ item.content }}</div>
			</div>
		</div>
		<div class=""></div>
		<!-- Trending on clubs -->
		<div class="work">Trending on clubs</div>
		<div class="countList m1280 f f-w-w f-a-c">
			<div v-for="(item, index) in port.clubsList" :key="index" class="imgS"><img :src="item.clubImage" alt="" /></div>
		</div>
		<!-- More -->
		<div class="f f-a-c f-j-c">
			<div @click="gomoVe" class="more hand">More</div>
		</div>
		<!-- Trending on Knowclub content -->
		<div class="work">Trending on Knowclub content</div>
		<div class="countList m1280 f f-w-w f-a-c">
			<div v-for="(item, index) in port.contentList" @click="goClublDetils(item)" :key="index" class="hand countItem f f-a-c">
				<div class="lefImg"><img :src="item.mage" alt="" /></div>
				<div class="rightBox">
					<div class="topName">{{ item.clubName }}</div>
					<div class="xiaoName">{{ item.title }}</div>
					<div class="count">
						{{ item.content }}
					</div>
					<div class="time f f-a-c f-j-b">
						<span>{{ dayjs(item.publishTime).format("DD/MM/YYYY") }}</span>
						<span>More</span>
					</div>
				</div>
			</div>
		</div>
		<div class="f f-a-c f-j-c">
			<div @click="goMoreCount" class="more hand">More</div>
		</div>
		<div style="height: 80px" class=""></div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted, reactive } from "vue";
	import { ElMessage, dayjs } from "element-plus";
	import { HomePicture, whykcWork, clubsList, ArticleList, ManageList } from "@/api/knowClub/index.js";
	import { refrestTokenKC } from "@/utils/setting.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let pageNum = ref(1);
	let sche = ref("");
	let total = ref(0);
	let port = reactive({
		topTextList: [],
		whyList: [],
		clubsList: [],
		contentList: [],
		messageList: []
	});
	let kcToken = localStorage.getItem("kcToken");
	let ind = localStorage.getItem("ind");
	if (ind <= 3 && kcToken) {
		localStorage.setItem("ind", 6);
	} else if (!kcToken) {
		localStorage.setItem("ind", 4);
	}
	onMounted(async () => {
		// await refrestTokenKC();
		await ManageLists();
		await HomePictureText();
		await whykcWorkList();
		// clubs列表
		await clubsLists();
		await artList();
		window.addEventListener("scroll", handleScroll);
		// 这个是xpert首页缓存
		localStorage.setItem("home", 2);
	});
	// 获取输入框提示
	const ManageLists = async () => {
		let n = await ManageList({ title: "kc_popular" });
		port.messageList = n.data;
	};
	//
	const goClublDetils = item => {
		router.push({
			path: "/PersonalHomepage",
			query: {
				id: item.userId
			}
		});
	};
	// 获取Trending on Knowclub content
	const artList = async () => {
		let n = await ArticleList({
			pageNum: pageNum.value,
			pageSize: 4
		});
		port.contentList = n.data.list;
	};
	// clubs列表
	const clubsLists = async () => {
		let n = await clubsList({
			pageNum: pageNum.value,
			pageSize: 18
		});
		total.value = n.data.total;
		port.clubsList = n.data.list;
	};
	//WHYLIST
	const whykcWorkList = async () => {
		let n = await whykcWork();
		port.whyList = n.data;
		// console.log(n, "99999999999999999999999");
	};
	// 上面三个图文
	const HomePictureText = async () => {
		let n = await HomePicture();
		port.topTextList = n.data;
	};
	// 点击去搜索
	const goIndustry = () => {
		router.push("/KnowClub/MoreIndustry");
	};
	// 点击去更多
	const gomoVe = () => {
		router.push("/KnowClub/MoreClubs");
	};
	const goMoreCount = () => {
		router.push("/KnowClub/MoreCount");
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
